<template>
  <div>
    <el-checkbox
           class="input-checkbox"
           :checked="fruits.length===fruitIds.length && fruitIds.length"
           @click="checkedAll" >
    </el-checkbox>
    <label>全选</label>
    <div v-for="fruite in fruits"
         :key="fruite.id"
         class="fruiteList">
      <el-checkbox
        :checked="fruitIds.indexOf(fruite.id)>=0"
        name="checkboxinput"
        class="input-checkbox"
        @click="checkedOne(fruite.id)">
      </el-checkbox>
      <label>{{fruite.value}}</label>
    </div>
    <button @click="deleteSome">Delete</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        fruits: [{
          id: '1',
          value: '苹果'
        }, {
          id: '2',
          value: '荔枝'
        }, {
          id: '3',
          value: '香蕉'
        }, {
          id: '4',
          value: '火龙果'
        }],
        fruitIds: ['1', '3', '4'],
        // 初始化全选按钮, 默认不选
        isCheckedAll: false
      }
    },
    methods: {
      checkedOne(fruitId) {
        let idIndex = this.fruitIds.indexOf(fruitId)
        if (idIndex >= 0) { // 如果已经包含就去除
          this.fruitIds.splice(idIndex, 1)
        } else { // 如果没有包含就添加
          this.fruitIds.push(fruitId)
        }
      },
      checkedAll(e) {
        this.isCheckedAll = e.target.checked
        if (this.isCheckedAll) { // 全选时
          this.fruitIds = []
          this.fruits.forEach(item => {
            this.fruitIds.push(item.id)
          })
        } else {
          this.fruitIds = []
        }
      },
      deleteSome() {
        this.fruits = this.fruits.filter(item => this.fruitIds.indexOf(item.id) === -1)
        this.fruitIds = []
      }
    }
  }
</script>
<style scoped lang="scss">
  .input-checkbox {
    width: 40px;
    height: 40px;
    -webkit-appearance: none;
    position: absolute;
    outline: none;
    border: none;
    &::after {
      left: 0;
      top: 0;
    }
    &:checked:after {
      left: 0;
      top: 0;
    }
  }
  label {
    padding-left: 50px;
    height: 40px;
    line-height: 45px;
  }
</style>
